<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/WEB-INF/common/includes.jsp"%>

<!DOCTYPE html>
<html lang="${currentLocale}" class="ng-app:topicAddModule" id="ng-app" ng-app="topicAddModule" xmlns:ng="http://angularjs.org">
<head>
<title>zzzzzz - 发表</title>
<%@ include file="/WEB-INF/common/meta.jsp"%>
<link type="text/css" rel="stylesheet" href="${ctx}/res/css/main.css" />
<link type="text/css" rel="stylesheet" href="${ctx}/res/bootstrap/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="${ctx}/res/bootstrap/css/bootstrap-responsive.min.css" />
<!--[if lte IE 8]>
      <script>
        document.createElement('ng-include');
        document.createElement('ng-pluralize');
        document.createElement('ng-view');
 
        // Optionally these for CSS
        document.createElement('ng:include');
        document.createElement('ng:pluralize');
        document.createElement('ng:view');
      </script>
    <![endif]-->

</head>
<body cz-shortcut-listen="true" class="bg-img">

	<header>
		<div class="container">
			<h1>遇见 <small>是你吗 是我</small></h1>
		</div>
	</header>

	<div class="container">
		<div class="row-fluid">
			<div class="span3">
				<div class="thumbnail" id="sidebar">
					<div id="i-portrait">
						<img src="res/imgs/portrait.jpg">
					</div>
					<div id="i-portrait-menu">			
						<a class="btn btn-small" href="#"><i class="icon-star"></i> 关注</a>
						<a class="btn btn-small" href="#"><i class="icon-leaf"></i> 好感</a>
						<a class="btn btn-small" href="#"><i class="icon-plus"></i> 友人</a>
					</div>
					<div id="i-tree">
						<table>
							<tbody>
								<tr>
									<td>
										<a href="{{project.site}}" target="_blank">我</a>
									</td>
									<td>
										<a href="#/edit/{{project._id.$oid}}"><i class="icon-pencil"></i></a>
									</td>
								</tr>
								<tr>
									<td>
										<a href="{{project.site}}" target="_blank">座右铭</a>
									</td>
									<td>
										<a href="#/edit/{{project._id.$oid}}"><i class="icon-pencil"></i></a>
									</td>
								</tr>
							</tbody>
						</table>

					</div>
				</div>
			</div>
			<div class="span9">
				<div class="thumbnail">
					我们认识在大学，相恋在大学<br/>
					<form id="topicForm">
						<textarea name="text" id="text" placeholder="原文" style="width: 100%;height: 100%;"></textarea>
					</form>
				</div>
				
			</div>
		</div>
	</div>

	<footer class="footer">
		
	</footer>

<script type="text/javascript" src="${ctx}/res/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="${ctx}/res/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="${ctx}/res/angular.min.js"></script>
<script type="text/javascript" src="${ctx}/res/js/json2.js"></script>
<script type="text/javascript" src="${ctx}/res/kindeditor/kindeditor-min.js"></script>

<script>

var editor;
KindEditor.ready(function(K) {
	editor = K.create('textarea[name="text"]', {
		resizeType : 1,
		allowImageUpload : true,
		allowPreviewEmoticons : false,
		allowImageUpload : true,
		allowFlashUpload : false,
		uploadJson : '${ctx}/topic/img',
		items : [
			'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold', 'italic', 'underline',
			'removeformat', '|', 'justifyleft', 'justifycenter', 'justifyright', 'insertorderedlist',
			'insertunorderedlist', '|', 'emoticons', 'image', 'link']
	});
});


var aj = angular.module('topicAddModule', []);

function TopicAddController($scope, $http) {
	var actionUrl = '${ctx}/content/comment/' + '${topic.topicId}';
	var start = 0;
	var offset = 3;

	load = function(startParam, offsetParam) {
		$http({
			url : actionUrl,
			method : "GET",
			params : {
				start : startParam,
				offset : offsetParam
			}
		}).success(function(data) {
			if (data.list.length > 0) {
				if (start == 0) {
					$scope.comments = data.list;
				} else {
					jQuery.merge($scope.comments, data.list);
				}
			}

			if (angular.isUndefined($scope.comments)) {
				$scope.commentsRemain = '还未有评论';
			} else {
				var commentsRemain = data.count - $scope.comments.length;
				if (commentsRemain > 0) {
					$scope.commentsRemain = '还有' + commentsRemain + '条回复';
				} else {
					$scope.commentsRemain = '加载结束';
				}
			}

		});
	};

	load(start, offset);

	push = function() {
		var comment = {};
		comment.text = $scope.commentForm.text;
		var userBase = {};
		userBase.userId = '${currentUser.userId}';
		userBase.username = '${currentUser.username}';
		userBase.thumbnailId = '${currentUser.thumbnailId}';
		comment.userBase = userBase;
		if (angular.isUndefined($scope.comments)) {
			$scope.comments = [];
		}
		$scope.comments.push(comment);
	};

	$scope.save = function() {
		if ($scope.commentFormElm.$valid) {
			$http.post(actionUrl, $scope.commentForm).success(function() {
				push();
				$scope.commentForm.text = '';
			});
		}
	};

	$scope.loadMore = function() {
		start += offset;
		load(start, offset);
	};
};
</script>
</body>
</html>